import { useState, useRef } from 'react';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Button, Modal, Form } from 'antd';
import dayjs from 'dayjs';
import { getPayList } from '@/services/api/message';

// import styles from './index.less';

const RechargeRecordPage = () => {
  const actionRef = useRef();

  const columns = [
    {
      title: '用户id',
      dataIndex: 'userID',
      hideInSearch: true,
    },
    {
      title: '用户名',
      dataIndex: 'username',
    },
    {
      title: '充值前条数',
      dataIndex: 'preNum',
      hideInSearch: true,
    },
    {
      title: '充值条数',
      dataIndex: 'curNum',

      hideInSearch: true,
    },
    {
      title: '充值金额',
      dataIndex: 'amount',

      hideInSearch: true,
    },
    {
      title: '当前条数',
      dataIndex: 'num',

      hideInSearch: true,
    },
    {
      title: '充值时间',
      dataIndex: 'createTime',
      valueType: 'dateTimeRange',
      search: {
        transform: (value) => ({ createdStar: value[0], createdEnd: value[1] }),
      },
      render: (t, row) => {
        return dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss');
      },
    },
  ];
  return (
    <PageContainer ghost>
      <ProTable
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        request={async (params, sorter, filter) => {
          const { current, pageSize, ...leftParams } = params;

          const { data, code } = await getPayList({
            ...leftParams,
            page: current,
            pageSize,
          });
          return {
            data: data?.list || [],
            success: code === 0,
            total: data?.total,
          };
        }}
        columns={columns}
      />
    </PageContainer>
  );
};

export default RechargeRecordPage;
